<template>
	<view class="index">
		<swiper :current="nowTabbar" @change="swiperChange" style="height: 100%;">
			<template v-for="(item,index) in tabbars">
				<swiper-item :item-id="item.name">
					<home ref="home" v-if="item.name==='首页'"></home>
					<chat ref="chat" v-else-if="item.name==='聊天室'"></chat>
					<my v-else-if="item.name==='我的'"></my>
				</swiper-item>
			</template>
		</swiper>
		<view :class="tabbarClass">
			<u-tabbar :value="nowTabbar" activeColor="#f7a81f" :placeholder="false" :fixed="true" :safeAreaInsetBottom="false"
			 @change="name => nowTabbar = name">
				<u-tabbar-item v-for="(item,index) in tabbars" :text="item.name" :name="index" :icon="item.icon"></u-tabbar-item>
			</u-tabbar>
		</view>

	</view>
</template>

<script>
	import home from "../home/home";
	import chat from "../chat/chat";
	import my from "../my/my";
	export default {
		components: {
			home,
			chat,
			my
		},
		data() {
			return {
				tabbars: [{
						name: '首页',
						icon: 'home'
					},
					{
						name: '聊天室',
						icon: 'photo'
					},
					{
						name: '我的',
						icon: 'account'
					},
				],
				nowTabbar: 0,
				tabbarClass: 'tabbar-d'
			}
		},
		onLoad() {
			if (this.$tool.uniGetStorage("token")) {
				this.init();
			} else {
				uni.reLaunch({
					url: '../login/login'
				});
			}
		},
		onShow() {
			if (this.nowTabbar === 0) { //home页面时获取一次最新的背景
				this.$refs['home'][0].nowBackgroundChange();
			}else if(this.nowTabbar === 1){
				this.$refs['chat'][0].nowBackgroundChange();
			}
		},
		methods: {
			swiperChange(val) {
				console.log(val.detail.current)
				// this.nowTabbar = val.detail.currentItemId;
				this.nowTabbar = val.detail.current;
				if (this.nowTabbar === 0) { //只有home页面才消失导航
					if (this.tabbarClass === 'tabbar-d') {
						this.tabbarClass = 'tabbar-d2'
					} else {
						this.tabbarClass = 'tabbar-d'
					}
				}else{
					this.tabbarClass = 'tabbar-d3'
				}
			},
			init() {
				this.$tool.isGetLocation('scope.userInfo', (res) => {
					//已经授权，获取用户信息成功
					console.log('已授权', res)
				}, (res) => {
					//没有授权，需要主动授权
					console.log('未授权', res);
				})
			}
		}
	}
</script>

<style lang="less">
	.index {
		height: 100vh;
		background-color: #8d8d8d;

		.tabbar-d {
			opacity: 0;
			animation: tabbarD 1.5s linear 1;
		}

		.tabbar-d2 {
			opacity: 0;
			animation: tabbarD2 1.5s linear 1;
		}

		.tabbar-d3 {
			opacity: 0.8;
		}

		@keyframes tabbarD {
			0% {
				opacity: 0.4;
			}

			25% {
				opacity: 0.8;
			}

			50% {
				opacity: 0.6;
			}

			75% {
				opacity: 0.2;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes tabbarD2 {
			0% {
				opacity: 0.4;
			}

			25% {
				opacity: 0.8;
			}

			50% {
				opacity: 0.6;
			}

			75% {
				opacity: 0.2;
			}

			100% {
				opacity: 0;
			}
		}


	}
</style>
